<template>
  <div class="ranking-bg c-pt196 c-p">
    <div class="c-hh64">
      <div class="c-flex-row c-justify-sb">
        <div class="c-flex-row c-aligni-baseline">
          <template v-if="rankType == 3">
            <div :class="timeType == 0 ? 'c-fw600' : ''" class="c-fs22 c-fc-white c-ml40 c-p">当前
              <div v-if="timeType == 0" class="iconfont c-fc-white c-fs24 c-pa c-p-lp50 c-translate-x-50 c-p-bm24">&#xe89d;</div>
            </div>
          </template>
          <template v-else>
            <div @click="changeTimeType(1)" :class="timeType == 1 ? 'c-fw600' : ''" class="c-fs26 c-fc-white c-ml24 c-p">昨日
              <div v-if="timeType == 1" class="iconfont c-fc-white c-fs24 c-pa c-p-lp50 c-translate-x-50 c-p-bm24">&#xe89d;</div>
            </div>
            <div @click="changeTimeType(2)" :class="timeType == 2 ? 'c-fw600' : ''" class="c-fs22 c-fc-white c-ml40 c-p">上周
              <div v-if="timeType == 2" class="iconfont c-fc-white c-fs24 c-pa c-p-lp50 c-translate-x-50 c-p-bm24">&#xe89d;</div>
            </div>
            <div @click="changeTimeType(3)" :class="timeType == 3 ? 'c-fw600' : ''" class="c-fs22 c-fc-white c-ml40 c-p">上月
              <div v-if="timeType == 3" class="iconfont c-fc-white c-fs24 c-pa c-p-lp50 c-translate-x-50 c-p-bm24">&#xe89d;</div>
            </div>
          </template>
        </div>
        <div class="c-flex-row">
          <div class="c-fs20 c-fw600 c-ww184 c-hh44 c-bg-white c-br24 c-flex-row c-flex-center" @click="changeRankingType">
            <span>{{ rankTypeText }}</span>
            <span class="iconfont c-fs18 c-ml6">{{showRankingType ? '&#xe67a;' : '&#xfbcd;'}}</span>
          </div>
          <div @click="showDescribe = true" class="c-fs20 c-fw600 c-ww124 c-hh44 c-bg-white c-br-tl24 c-br-bl24 c-flex-row c-flex-center c-ml20">规则说明</div>
        </div>
      </div>
    </div>
    <div class="c-bg-white c-pt40 c-br-tl32 c-br-tr32">
      <div class="c-flex-row c-aligni-center c-ph40 c-mb40" v-for="(item, index) in dataList" :key="index">
        <img v-if="index == 0" :src="require('@/assets/i/wap/member/rank1.png')" class="c-ww36 c-hh40 c-flex-shrink0" alt="">
        <img v-else-if="index == 1" :src="require('@/assets/i/wap/member/rank2.png')" class="c-ww36 c-hh40 c-flex-shrink0" alt="">
        <img v-else-if="index == 2" :src="require('@/assets/i/wap/member/rank3.png')" class="c-ww36 c-hh40 c-flex-shrink0" alt="">
        <div v-else class="c-fs24 c-fc-gray c-mww36 c-flex-shrink0 c-textAlign-c">{{ index + 1 }}</div>
        <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" @error="item.headimgurl= require('@/assets/defult_head.png')" class="c-ww60 c-hh60 c-brp50 c-ml30 c-flex-shrink0" />
        <div class="c-w0 c-flex-grow1 c-fs24 c-fc-xblack c-text-ellipsis2 c-ml16">{{ item.nickname }}</div>
        <div v-if="rankType != 3" class="c-fs24 c-fc-xblack c-fw600 c-ml16">{{'￥' | iosPriceFilter}}{{ item.rankValue }}</div>
        <div v-else class="c-fs24 c-fc-xblack c-fw600 c-ml16">{{ item.rankValue }}人</div>
      </div>
    </div>
    <div class="c-w100 c-maxw640 c-pf c-p-b0 c-p-l0 c-p-r0 c-m-0auto c-hh120 c-box-shadow9 c-bg-white c-flex-row c-aligni-center c-ph40">
      <div class="c-fs28 c-fc-xblack c-fw600 c-mww36 c-flex-shrink0 c-textAlign-c">{{ userRankInfo.rank }}</div>
      <img :src="$addXossFilter(userHeadImg, require('@/assets/defult_head.png'))" class="c-ww84 c-hh84 c-brp50 c-ml28 c-flex-shrink0" />
      <div class="c-w0 c-flex-grow1 c-fs28 c-fc-xblack c-text-ellipsis2 c-ml20">{{ userName }}</div>
      <div v-if="rankType == 1 || rankType == 2" class="c-fs24 c-fc-xblack c-ml16"><span class="c-fs28 c-fc-gray">{{rankType == 1 ? '预计收益' : '已结算收益'}}:</span><span class="c-fw600">{{'￥' | iosPriceFilter}}{{ userRankInfo.rankValue }}</span></div>
      <div v-if="rankType == 3" class="c-fs24 c-fc-xblack c-ml16"><span class="c-fs28 c-fc-gray">用户数:</span><span class="c-fw600">{{ userRankInfo.rankValue }}人</span></div>
      <div v-if="rankType == 4 || rankType == 5" class="c-fs24 c-fc-xblack c-ml16"><span class="c-fs28 c-fc-gray">{{rankType == 4 ? '预计业绩' : '已结算业绩'}}:</span><span class="c-fw600">{{'￥' | iosPriceFilter}}{{ userRankInfo.rankValue }}</span></div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (dataList && dataList.length > 0)" :noData="dataList.length == 0 && !isLoading" :noDataText="'暂无数据'"></loading-status-tem>
    <cj-actionsheet v-model="showRankingType" :choose-tag-value="rankTypeText" :cancel-text="false" :item-list="rankingTypeList" round @choose="choose"></cj-actionsheet>
    <cj-popup v-model="showDescribe" round :closeable="true" class="c-w80 c-ph28 c-pv40">
      <div class="c-fs28 c-fc-xblack c-fw600 c-textAlign-c">规则说明</div>
      <div class="c-fs24 c-fc-sblack c-mt28 c-lh36 c-ws-pw" v-if="userRankSettings.describe" v-html="userRankSettings.describe"></div>
      <div class="c-fs24 c-fc-sblack c-mt28 c-lh36 c-ws-pw" v-else>
        <div><span class="c-fw600">预计收益排行：</span>是指在该时间段内推广下单产生的收益，包含已结算和待结算的收益；不包含线下订单的收益</div>
        <div class="c-mt20"><span class="c-fw600">已结算收益排行：</span>是指在该时间段内推广下单产生的收益，包含已结算的收益；不包含线下订单的收益</div>
        <div class="c-mt20"><span class="c-fw600">当前用户数排行：</span>当前用户名下直推的有效用户数</div>
        <div class="c-mt20"><span class="c-fw600">预计业绩排行：</span>是指在该时间段内推广下单产生的实付金额之和，包含已结算和待结算的订单；不包含线下订单的业绩</div>
        <div class="c-mt20"><span class="c-fw600">已结算业绩排行：</span>是指在该时间段内推广下单产生的实付金额之和，包含已结算的订单；不包含线下订单的业绩</div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
let rankTypeName = {
      1: '预计收益排行',
      2: '已结算收益排行',
      3: '当前用户数排行',
      4: '预计业绩排行',
      5: '已结算业绩排行'
    }
export default {
  name: 'RankingList',
  components: {
    loadingStatusTem
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      page: 1,
      is_page: false,
      limit: 10,
      dataList: [],
      isLoading: false,
      showRankingType: false,
      rankingTypeList: [],
      userRankInfo: '',
      userRankSettings: '',
      rankType: 1,
      timeType: 1,
      userHeadImg: localStorage.getItem("userHeadImg"),
      userName: localStorage.getItem("userName"),
      showDescribe: false,
      totalShowPage: 20
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {
    rankTypeText() {
      return rankTypeName[this.rankType];
    },
  },
  watch: {

  },
  methods: {
    getPromoterConf() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + 'Analyse/getRankSetting', res => {
          this.userRankSettings = res.userRankSettings;
          resolve()
        }, failRes => {
          reject(failRes)
        })
      })
    },
    getUserRank() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(`${global.apiurl}Analyse/getUserRank?rankType=${this.rankType}&timeType=${this.timeType}`, res => {
          this.userRankInfo = res.userRankInfo;
          resolve()
        }, failRes => {
          reject(failRes)
        })
      })
    },
    choose(item) {
      this.rankType = item.value;
      if (this.rankType == 3) {
        this.timeType = 0;
      } else if (this.rankType != 3 && this.timeType == 0) {
        this.timeType = 1;
      }
      this.page = 1;
      this.is_page = false;
      this.dataList = [];
      this.getUserRank();
      this.getList();
    },
    changeRankingType() {
      this.showRankingType = true;
    },
    getList() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}Analyse/getUserRankList?page=${this.page}&limit=${this.limit}&rankType=${this.rankType}&timeType=${this.timeType}`,
        res => {
          if (this.page == 1) {
            this.dataList = res && res.data ? res.data : [];
          } else {
            this.dataList = this.dataList.concat(res.data);
          }
          this.is_page = this.page < this.totalShowPage ? true : false;
          this.page = this.page < this.totalShowPage ? (this.page + 1) : this.page;
          this.isLoading = false;
        },
        failRes => {
          this.isLoading = false;
        }
      );
    },
    changeTimeType(type) {
      if (this.isLoading) {
        return;
      }
      this.timeType = type;
      this.page = 1;
      this.is_page = false;
      this.dataList = [];
      this.getUserRank();
      this.getList();
    },
     windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList();
        }
      });
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.showRankingType = false;
    if (utilJs.checkNeedInitData(this.dataList, this.page)) {
      this.page = 1;
      this.is_page = false;
      this.limit = 10;
      this.dataList = [];
      this.timeType = 1;
      this.getPromoterConf().then(() => {
        if (this.userRankSettings.rankRule.includes(5)) {
          this.rankingTypeList.unshift({value: 5, name: rankTypeName[5]})
          this.rankType = 5;
        }
        if (this.userRankSettings.rankRule.includes(4)) {
          this.rankingTypeList.unshift({value: 4, name: rankTypeName[4]})
          this.rankType = 4;
        }
        if (this.userRankSettings.rankRule.includes(3)) {
          this.rankingTypeList.unshift({value: 3, name: rankTypeName[3]})
          this.rankType = 3;
        }
        if (this.userRankSettings.rankRule.includes(2)) {
          this.rankingTypeList.unshift({value: 2, name: rankTypeName[2]})
          this.rankType = 2;
        }
        if (this.userRankSettings.rankRule.includes(1)) {
          this.rankingTypeList.unshift({value: 1, name: rankTypeName[1]})
          this.rankType = 1;
        }
        this.totalShowPage = Math.ceil(this.userRankSettings.rankNumber / 10);
        this.getUserRank()
        this.getList();
      })
    }
    setDocumentTitle("排行榜");// eslint-disable-line
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ranking-bg {
  background: url('../../../assets/i/wap/member/promoter-bg.png') no-repeat left top;
  background-size: 100% 7.15rem;
}
</style>
